<script setup>
import Header from '@/components/header/Header.vue'
import { reactive, ref } from 'vue'
import api from '@/api/index.js'
import { useRouter } from "vue-router"
import { isValidChineseID, isValidPhoneNumber } from '@/utils/check.js'

const formRef = ref(null)
const loading = ref(false)

const validatorIsValidChineseID = (ID) => {
  if (isValidChineseID(ID)) {
    return true
  }
  return '请输入正确的身份证号码'
}

const chenkIsValidPhoneNumber = (phone) => {
  if (!phone) {
    return '请输入手机号'
  }

  if (isValidPhoneNumber(phone)) {
    return true
  }
  return '请输入正确的手机号'
}

const router = useRouter()
const form = reactive({
  cardType: '身份证',
  name: '',
  idCard: '',
  linkPhone: ''

})
const documenttypelist = ref([])
const cardTypelist = ref('')
const showPicker = ref(false);
const customFieldName = {
  text: 'itemName',
  value: 'itemCode',
};
const onConfirm = ({ selectedOptions }) => {
  console.log(selectedOptions);
  showPicker.value = false;
  form.cardType = selectedOptions[0]?.itemName;
  cardTypelist.value = selectedOptions[0].itemCode;

};
const onSubmit = () => {
  const { idCard, linkPhone, name } = form
  formRef.value.validate().then(() => {
    loading.value = true
    form.cardType = 'identityCard'
    api.addapedestrian({
      cardType: 'identityCard',
      idCard,
      linkPhone,
      name
    }).then(() => {
      router.go(-1)
    }).finally(() => {
      loading.value = false
    })
  })
}

function getype() {
  api.gettypeCode().then((res) => {
    documenttypelist.value = res.data
  }).finally(() => {

  })
}
getype()



</script>

<template>
  <div class="page">
    <Header title="添加出行人" :back="true" />
    <div class="content">
      <div class="form">
        <van-form @submit="onSubmit" ref="formRef">
          <van-cell-group inset>
            <van-field required v-model="form.name" name="name" label="姓名" placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写用户名' }]" input-align="left" error-message-align="left" />
            <!--          <van-field-->
            <!--            required v-model="form.cardType"-->
            <!--            is-link-->
            <!--            readonly-->
            <!--            name="cardType"-->
            <!--            label="证件类型"-->
            <!--            placeholder="点击选择证件类型"-->
            <!--            @click="showPicker = false"-->
            <!--          />-->
            <van-field required label="证件类型" model-value="身份证" disabled input-align="left" error-message-align="left" />

            <van-popup required v-model:show="showPicker" position="bottom">
              <van-picker :columns="documenttypelist" @confirm="onConfirm" @cancel="showPicker = false"
                :columns-field-names="customFieldName" />
            </van-popup>

            <van-field required v-model="form.idCard" name="idCard" label="证件号码" placeholder="请输入证件号码" input-align="left"
              error-message-align="left" :rules="[
                { required: true, message: '请输入证件号码' },
                { validator: validatorIsValidChineseID }
              ]" />
            <van-field required v-model="form.linkPhone" name="linkPhone" label="手机号" type="tel" placeholder="请输入手机号"
              @keyup.enter="onSubmit" input-align="left" error-message-align="left" :rules="[
                { validator: chenkIsValidPhoneNumber }
              ]" />
          </van-cell-group>
          <div class="button_box">
            <div class="button" :class="{ button_disabled: loading }" @click="onSubmit">
              <van-loading v-if="loading" type="spinner" color="#4FAC91" />
              <span v-else>保存</span>
            </div>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.van-field__label) {
  color: var(--van-field-label-color);
}

:deep(.van-field__control:disabled) {
  -webkit-text-fill-color: var(--van-field-label-color);
}

:deep(.van-cell-group--inset) {
  margin: 0;
}

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    overflow-y: auto;
    background: #F9F8F3;

    .form {
      padding: 1.5rem;

      .button_box {
        margin: 4rem 0;
        height: 5rem;
        line-height: 5rem;
        text-align: center;
        background: var(--van-primary-color);
        border-radius: .5rem;
        font-size: 1.6rem;
        color: #FFFFFF;
      }

      .button_box:active {
        background: var(--van-primary-button-active-color);
      }

      .button_disabled {
        background: rgb(203, 231, 220);
      }
    }
  }
}
</style>
